<template>
  <div class="add-point-dialog">
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑文章' : '添加文章'"
      width="60%"
      @closed="closed"
    >
      <div class="dialog-content">
        <el-form
          ref="ruleFormRef"
          :model="form"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="标题" prop="noticeTitle">
            <el-input v-model.trim="form.noticeTitle" type="text" />
          </el-form-item>
          <el-form-item label="内容" prop="noticeContent">
            <Editor v-model="form.noticeContent" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit" :loading="isLoading">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import Editor from "@/components/Editor/index.vue";
import { ref, watch, reactive, computed } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { AddNews, NewItem } from "@/api/news/news";
import { addNews, editNews } from "@/api/news";

defineOptions({
  name: "addUser"
});
interface Props {
  modelValue: boolean;
  isEdit: boolean;
  info: NewItem | null;
}
const props = defineProps<Props>();
const emits = defineEmits(["update:modelValue", "getList"]);
const dialogVisible = computed({
  get() {
    return props.modelValue;
  },
  set(newValue) {
    emits("update:modelValue", newValue);
  }
});

// 表单
const ruleFormRef = ref<FormInstance>();
const form = ref<AddNews>({
  noticeTitle: "", //资讯标题
  noticeType: "1", //资讯类型，无特殊需求写死
  noticeContent: "", //内容
  status: "0" //状态
});
// 表单回显
watch(
  () => props.info,
  () => {
    if (props.isEdit) {
      for (const key in form.value) {
        form.value[key] = props.info[key];
      }
    }
  }
);
const rules = reactive<FormRules<typeof form>>({
  noticeTitle: [{ required: true, message: "标题不能为空", trigger: "blur" }],
  noticeContent: [{ required: true, message: "内容不能为空", trigger: "blur" }]
});
const closed = () => {
  form.value = {
    noticeTitle: "", //资讯标题
    noticeType: "1", //资讯类型，无特殊需求写死
    noticeContent: "", //内容
    status: "0" //状态
  };
  ruleFormRef.value.clearValidate();
};
// 添加
const add = async () => {
  const res = await addNews(form.value);
  return res;
};
// 编辑
const edit = async () => {
  const res = await editNews({ ...props.info, ...form.value });
  return res;
};
// 提交
const isLoading = ref(false);
const submit = () => {
  ruleFormRef.value.validate(async valida => {
    if (valida) {
      isLoading.value = true;
      const res = props.isEdit ? await edit() : await add();
      isLoading.value = false;
      if (res.code === 200) {
        dialogVisible.value = false;
        ElMessage.success(`${props.isEdit ? "编辑" : "添加"}成功`);
        emits("getList");
      }
    }
  });
};
</script>
<style lang="scss" scoped>
:deep(.el-form-item__label) {
  font-weight: 700;
}
</style>
